<template>
    <div>
         <el-breadcrumb separator="/">
            <el-breadcrumb-item >意见管理</el-breadcrumb-item>
            <el-breadcrumb-item :to="{ path: '/index/advise/edit' }">编辑意见</el-breadcrumb-item>
        </el-breadcrumb>

        <el-row class="margintop20" >
            <el-col>
                <el-steps :active="active" finish-status="success">
                    <el-step title="步骤 1" description="修改意见标题"></el-step>
                    <el-step title="步骤 2" description="修改意见内容"></el-step>
                    <el-step title="步骤 3" description="修改成功"></el-step>
                </el-steps>
            </el-col>


            <el-col class="margintop20" >
                <div v-show="active==1" style="width:35%">
                    <el-form 
                    :model="form" 
                    :rules="rules"
                    ref="form" 
                    label-width="100px"
                    label-position="right" 
                    class="form">
                    <el-form-item label="标题" prop="title">
                        <el-input v-model="form.title"></el-input>
                    </el-form-item>
                    <el-form-item label="分类" prop="category" class="demonstration">
                        <el-cascader
                            v-model="form.category"
                            :options="options"
                            @change="handleChange">
                        </el-cascader>
                    </el-form-item>
                    </el-form>
                    <el-button @click="gonext" type="warning">下一步</el-button>
                </div>
                <div v-show="active==2" >
                    <quill-editor 
                        v-model="form.content" 
                        ref="advisecontent" 
                        :options="editorOption" 
                        @blur="onEditorBlur($event)" 
                        @focus="onEditorFocus($event)"
                        @change="onEditorChange($event)">
                    </quill-editor>
                    <el-button @click="active--" type="primary">上一步</el-button>
                    <el-button @click="next" type="warning">下一步</el-button>
                </div>
                <div v-show="active==3">
                    <el-button @click="active--" type="primary">上一步</el-button>
                    <el-button  type="success"  @click="addtosome">完成</el-button>
                </div>
            </el-col>
            
        </el-row>
    </div>
</template>

<script>
import {advacecatetory} from "@/utils"
import {getadvisebyid,updateadvisebyid} from "@/api"
export default {
     data(){
        return {
            editorOption:{},
            options:advacecatetory,
            active:1,
            form:{},
            rules:{
                title:[
                    {required:true,message:"请输入标题",trigger:"blur"}
                ],
                category:[
                    {required:true,message:"请选择类型",trigger:"blur"}
                ]
            },
        }
    },
    mounted(){
        getadvisebyid({
            _id:this.$route.params.id
        }).then(res=>{
            console.log(res.result)
            res.result.category = res.result.category.split(",")
            this.form ={...res.result}
        })
    },
    methods:{
        onEditorChange(){

        },
        onEditorFocus(){

        },
        onEditorBlur(){

        },
        handleChange(){

        },
        gonext(){
            this.$refs.form.validate(valid=>{
                if(valid){
                    this.active++
                }else{
                    this.$message.error("请完善信息")
                    return false
                }
            })
            
        },
        next(){
             if(this.form.content){
                this.active++;
            }else{
                this.$message.error("请先完善意见")
            }
        },
         addtosome(){
             this.form.category = this.form.category.join(",")
            updateadvisebyid(this.form)
            .then(res=>{
                if(res.type){
                    this.$router.push({name:"adviselist"})
                }
            })
        
        }
    }
}
</script>

<style lang="scss" >
.ql-editor{
    height:250px;
}
</style>